<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Code" : ["FL","DLBCL","DLBCL","FL","FL","DLBCL","DLBCL","DLBCL","DLBCL","DLBCL","FL","FL","FL","DLBCL","FL","DLBCL","DLBCL","DLBCL","FL","DLBCL"],
        "Drug" : ["4 mg","2 mg","3 F6 mg","4 mg","3 F6 mg","3 F6 mg","2 mg","2 mg","2 mg","2 mg","1 mg","4 F6 mg","3 F6 mg","4 F6 mg","3 F6 mg","2 mg","2 mg","1 mg","3 F6 mg","4 mg"]
     },
     "y" : {
        "data" : [
          [4.8,33.9,40.1,6.9,28.8,40.5,31.2,40,41.8,29.7,1.5,10,45.5,14.9,26.7,29.9,5.6,10.7,25.9,20.8],
          [null,null,null,null,null,35.5,null,35,null,null,null,5,null,null,21.7,null,0.6,null,null,null],
          [29.3,23,19.6,14,5.2,-1.4,-2.8,-6.9,-6.9,-7.1,-13.2,-13.9,-14.5,-16.6,-27.2,-33.9,-43.5,-43.7,-51.4,-52.6],
          [192.7,175.1,93.2,172,121.4,77.1,33.7,73.6,188.6,122.8,80.8,32.5,183.4,87.2,43.5,46.6,115.4,99.9,180.5,130.3]
        ],
        "vars" : ["Duration","Discontinued","Response","Baseline"]
     },
     "z" : {
        "Panel" : [1,1,2,3]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "graphOrientation":"vertical",
     "graphType":"Bar",
     "layoutAdjust":"true",
     "layoutConfig":[
        {
           "axisCoordinate":"true",
           "graphType":"BarLine",
           "showDataValues":"true",
           "xAxis":[
              "Duration"
           ],
           "xAxis2":[
              "Discontinued"
           ],
           "xAxisTitle":"Duration of Treatment"
        },
        {
           "colorBy":"Drug",
           "legendColumns":5,
           "legendInside":"true",
           "legendPosition":"bottomLeft",
           "showLegend":"true",
           "showLegendTitle":"false",
           "xAxisTitle":"Change from Baseline (%)"
        },
        {
           "barLollipopFactor":1.5,
           "barLollipopOpen":"false",
           "barType":"lollipop",
           "xAxisTitle":"Baseline (mm)"
        }
     ],
     "layoutLabelShow":"false",
     "layoutTopology":"3X1",
     "showLegend":"false",
     "theme":"CanvasXpress",
     "title":"Tumor Response and Duration by Subject Id",
     "xAxis2Show":"false"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


  
  <-- Functions after rendering graph -->
  cX.segregateVariables(["Panel"]);
  
</script>